<template>
  <div class="military-view">
    <div class="military-header">
      <div class="view-title">
        <h1 class="title">
          <span class="title-icon">⚔️</span>
          军事管理
        </h1>
        <p class="subtitle">管理你的舰队和军事力量</p>
      </div>
      
      <div class="military-controls">
        <div class="fleet-power">
          <span class="power-icon">💪</span>
          <span class="power-value">{{ formatNumber(totalFleetPower) }}</span>
          <span class="power-label">舰队战力</span>
        </div>
        
        <div class="view-filters">
          <select v-model="selectedFleetType" class="filter-select">
            <option value="all">所有舰队</option>
            <option value="combat">战斗舰队</option>
            <option value="exploration">探索舰队</option>
            <option value="transport">运输舰队</option>
          </select>
          
          <select v-model="selectedStatus" class="filter-select">
            <option value="all">所有状态</option>
            <option value="idle">待命</option>
            <option value="moving">移动中</option>
            <option value="combat">战斗中</option>
            <option value="maintenance">维护中</option>
          </select>
        </div>
        
        <button @click="createNewFleet" class="create-fleet-btn">
          <span class="btn-icon">➕</span>
          创建舰队
        </button>
      </div>
    </div>
    
    <div class="military-content">
      <!-- 军事概览 -->
      <div class="military-overview">
        <div class="overview-stats">
          <div class="stat-card">
            <div class="stat-icon">🚢</div>
            <div class="stat-info">
              <div class="stat-value">{{ totalShips }}</div>
              <div class="stat-label">总舰船数</div>
            </div>
          </div>
          
          <div class="stat-card">
            <div class="stat-icon">⚔️</div>
            <div class="stat-info">
              <div class="stat-value">{{ activeFleets }}</div>
              <div class="stat-label">活跃舰队</div>
            </div>
          </div>
          
          <div class="stat-card">
            <div class="stat-icon">🏭</div>
            <div class="stat-info">
              <div class="stat-value">{{ shipyardsCount }}</div>
              <div class="stat-label">造船厂</div>
            </div>
          </div>
          
          <div class="stat-card">
            <div class="stat-icon">⚡</div>
            <div class="stat-info">
              <div class="stat-value">{{ formatNumber(maintenanceCost) }}</div>
              <div class="stat-label">维护费用</div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 舰队列表 -->
      <div class="fleets-section">
        <div class="section-header">
          <h2 class="section-title">舰队管理</h2>
          <div class="section-actions">
            <button @click="toggleFleetView" class="view-toggle-btn">
              <span class="btn-icon">{{ fleetViewMode === 'grid' ? '📋' : '⊞' }}</span>
              {{ fleetViewMode === 'grid' ? '列表视图' : '网格视图' }}
            </button>
          </div>
        </div>
        
        <div class="fleets-container" :class="fleetViewMode">
          <div 
            v-for="fleet in filteredFleets" 
            :key="fleet.id"
            class="fleet-card"
            :class="[`status-${fleet.status}`, { selected: selectedFleet?.id === fleet.id }]"
            @click="selectFleet(fleet)"
          >
            <div class="fleet-header">
              <div class="fleet-info">
                <h3 class="fleet-name">{{ fleet.name }}</h3>
                <div class="fleet-meta">
                  <span class="fleet-type">{{ getFleetTypeName(fleet.type) }}</span>
                  <span class="fleet-location">{{ fleet.currentLocation }}</span>
                </div>
              </div>
              
              <div class="fleet-status">
                <div class="status-indicator" :class="`status-${fleet.status}`">
                  {{ getStatusIcon(fleet.status) }}
                </div>
                <span class="status-text">{{ getStatusName(fleet.status) }}</span>
              </div>
            </div>
            
            <div class="fleet-composition">
              <div class="ship-types">
                <div 
                  v-for="shipType in fleet.composition" 
                  :key="shipType.type"
                  class="ship-type-item"
                >
                  <span class="ship-icon">{{ getShipIcon(shipType.type) }}</span>
                  <span class="ship-count">{{ shipType.count }}</span>
                </div>
              </div>
            </div>
            
            <div class="fleet-stats">
              <div class="stat-row">
                <div class="stat-item">
                  <span class="stat-icon">💪</span>
                  <span class="stat-text">{{ formatNumber(fleet.combatPower) }}</span>
                </div>
                <div class="stat-item">
                  <span class="stat-icon">🛡️</span>
                  <span class="stat-text">{{ formatNumber(fleet.defense) }}</span>
                </div>
                <div class="stat-item">
                  <span class="stat-icon">🚀</span>
                  <span class="stat-text">{{ fleet.speed }}</span>
                </div>
              </div>
              
              <div class="stat-row">
                <div class="stat-item">
                  <span class="stat-icon">⚡</span>
                  <span class="stat-text">{{ formatNumber(fleet.maintenanceCost) }}</span>
                </div>
                <div class="stat-item">
                  <span class="stat-icon">👥</span>
                  <span class="stat-text">{{ formatNumber(fleet.crew) }}</span>
                </div>
                <div class="stat-item">
                  <span class="stat-text">{{ fleet.ships.length }} 艘</span>
                </div>
              </div>
            </div>
            
            <div class="fleet-actions">
              <button @click.stop="manageFleet(fleet)" class="action-btn primary">
                <span class="btn-icon">⚙️</span>
                管理
              </button>
              <button @click.stop="moveFleet(fleet)" class="action-btn" :disabled="fleet.status === 'moving'">
                <span class="btn-icon">🗺️</span>
                移动
              </button>
              <button @click.stop="viewFleetDetails(fleet)" class="action-btn">
                <span class="btn-icon">📊</span>
                详情
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 造船厂 -->
      <div class="shipyards-section">
        <div class="section-header">
          <h2 class="section-title">造船厂</h2>
          <button @click="buildNewShip" class="build-ship-btn">
            <span class="btn-icon">🔨</span>
            建造舰船
          </button>
        </div>
        
        <div class="shipyards-grid">
          <div 
            v-for="shipyard in shipyards" 
            :key="shipyard.id"
            class="shipyard-card"
          >
            <div class="shipyard-header">
              <div class="shipyard-info">
                <h3 class="shipyard-name">{{ shipyard.name }}</h3>
                <div class="shipyard-location">{{ shipyard.location }}</div>
              </div>
              <div class="shipyard-level">
                <span class="level-text">等级 {{ shipyard.level }}</span>
              </div>
            </div>
            
            <div class="shipyard-capacity">
              <div class="capacity-info">
                <span class="capacity-label">建造槽位:</span>
                <span class="capacity-value">{{ shipyard.usedSlots }}/{{ shipyard.totalSlots }}</span>
              </div>
              <div class="capacity-bar">
                <div 
                  class="capacity-fill" 
                  :style="{ width: `${(shipyard.usedSlots / shipyard.totalSlots) * 100}%` }"
                ></div>
              </div>
            </div>
            
            <div v-if="shipyard.currentProjects.length > 0" class="current-projects">
              <h4 class="projects-title">建造中</h4>
              <div class="projects-list">
                <div 
                  v-for="project in shipyard.currentProjects" 
                  :key="project.id"
                  class="project-item"
                >
                  <div class="project-info">
                    <span class="project-icon">{{ getShipIcon(project.shipType) }}</span>
                    <div class="project-details">
                      <div class="project-name">{{ project.shipName }}</div>
                      <div class="project-progress">
                        <div class="progress-bar">
                          <div 
                            class="progress-fill" 
                            :style="{ width: `${(project.currentProgress / project.totalCost) * 100}%` }"
                          ></div>
                        </div>
                        <span class="progress-text">{{ Math.round((project.currentProgress / project.totalCost) * 100) }}%</span>
                      </div>
                    </div>
                  </div>
                  <div class="project-time">
                    <span class="time-remaining">{{ formatTime(project.timeRemaining) }}</span>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="shipyard-actions">
              <button @click="upgradeShipyard(shipyard)" class="action-btn">
                <span class="btn-icon">⬆️</span>
                升级
              </button>
              <button @click="manageShipyard(shipyard)" class="action-btn">
                <span class="btn-icon">⚙️</span>
                管理
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 舰队详情面板 -->
    <div v-if="selectedFleet" class="fleet-details-panel">
      <div class="panel-header">
        <div class="panel-title-section">
          <div class="panel-icon">⚔️</div>
          <div class="panel-title-info">
            <h2 class="panel-title">{{ selectedFleet.name }}</h2>
            <div class="panel-subtitle">{{ getFleetTypeName(selectedFleet.type) }}</div>
          </div>
        </div>
        <button @click="closeFleetDetails" class="close-btn">✕</button>
      </div>
      
      <div class="panel-content">
        <div class="fleet-overview">
          <div class="overview-item">
            <span class="overview-label">当前位置:</span>
            <span class="overview-value">{{ selectedFleet.currentLocation }}</span>
          </div>
          <div class="overview-item">
            <span class="overview-label">状态:</span>
            <span class="overview-value">{{ getStatusName(selectedFleet.status) }}</span>
          </div>
          <div class="overview-item">
            <span class="overview-label">指挥官:</span>
            <span class="overview-value">{{ selectedFleet.commander || '无' }}</span>
          </div>
        </div>
        
        <div class="fleet-capabilities">
          <h4 class="capabilities-title">舰队能力</h4>
          <div class="capabilities-grid">
            <div class="capability-item">
              <span class="capability-icon">💪</span>
              <div class="capability-info">
                <div class="capability-name">战斗力</div>
                <div class="capability-value">{{ formatNumber(selectedFleet.combatPower) }}</div>
              </div>
            </div>
            <div class="capability-item">
              <span class="capability-icon">🛡️</span>
              <div class="capability-info">
                <div class="capability-name">防御力</div>
                <div class="capability-value">{{ formatNumber(selectedFleet.defense) }}</div>
              </div>
            </div>
            <div class="capability-item">
              <span class="capability-icon">🚀</span>
              <div class="capability-info">
                <div class="capability-name">速度</div>
                <div class="capability-value">{{ selectedFleet.speed }}</div>
              </div>
            </div>
            <div class="capability-item">
              <span class="capability-icon">📡</span>
              <div class="capability-info">
                <div class="capability-name">探测范围</div>
                <div class="capability-value">{{ selectedFleet.detectionRange }}</div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="fleet-ships">
          <h4 class="ships-title">舰船列表</h4>
          <div class="ships-list">
            <div 
              v-for="ship in selectedFleet.ships" 
              :key="ship.id"
              class="ship-item"
            >
              <div class="ship-icon">{{ getShipIcon(ship.type) }}</div>
              <div class="ship-info">
                <div class="ship-name">{{ ship.name }}</div>
                <div class="ship-type">{{ getShipTypeName(ship.type) }}</div>
              </div>
              <div class="ship-stats">
                <div class="ship-health">
                  <div class="health-bar">
                    <div 
                      class="health-fill" 
                      :style="{ width: `${(ship.currentHealth / ship.maxHealth) * 100}%` }"
                    ></div>
                  </div>
                  <span class="health-text">{{ ship.currentHealth }}/{{ ship.maxHealth }}</span>
                </div>
              </div>
              <div class="ship-actions">
                <button @click="repairShip(ship)" class="ship-btn" :disabled="ship.currentHealth === ship.maxHealth">
                  <span class="btn-icon">🔧</span>
                </button>
                <button @click="upgradeShip(ship)" class="ship-btn">
                  <span class="btn-icon">⬆️</span>
                </button>
              </div>
            </div>
          </div>
        </div>
        
        <div class="fleet-orders">
          <h4 class="orders-title">舰队指令</h4>
          <div class="orders-grid">
            <button @click="attackOrder" class="order-btn attack">
              <span class="btn-icon">⚔️</span>
              攻击
            </button>
            <button @click="defendOrder" class="order-btn defend">
              <span class="btn-icon">🛡️</span>
              防御
            </button>
            <button @click="patrolOrder" class="order-btn patrol">
              <span class="btn-icon">👁️</span>
              巡逻
            </button>
            <button @click="retreatOrder" class="order-btn retreat">
              <span class="btn-icon">🏃</span>
              撤退
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

interface Ship {
  id: string
  name: string
  type: string
  currentHealth: number
  maxHealth: number
  combatPower: number
  defense: number
}

interface ShipComposition {
  type: string
  count: number
}

interface Fleet {
  id: string
  name: string
  type: 'combat' | 'exploration' | 'transport'
  status: 'idle' | 'moving' | 'combat' | 'maintenance'
  currentLocation: string
  commander?: string
  combatPower: number
  defense: number
  speed: number
  detectionRange: number
  maintenanceCost: number
  crew: number
  ships: Ship[]
  composition: ShipComposition[]
}

interface BuildProject {
  id: string
  shipName: string
  shipType: string
  currentProgress: number
  totalCost: number
  timeRemaining: number
}

interface Shipyard {
  id: string
  name: string
  location: string
  level: number
  totalSlots: number
  usedSlots: number
  currentProjects: BuildProject[]
}

// 响应式数据
const selectedFleetType = ref('all')
const selectedStatus = ref('all')
const selectedFleet = ref<Fleet | null>(null)
const fleetViewMode = ref<'grid' | 'list'>('grid')

// 模拟数据
const fleets = ref<Fleet[]>([
  {
    id: '1',
    name: '第一舰队',
    type: 'combat',
    status: 'idle',
    currentLocation: '太阳系',
    commander: '张舰长',
    combatPower: 15000,
    defense: 8500,
    speed: 120,
    detectionRange: 500,
    maintenanceCost: 850,
    crew: 2500,
    composition: [
      { type: 'battleship', count: 2 },
      { type: 'cruiser', count: 4 },
      { type: 'destroyer', count: 8 }
    ],
    ships: [
      { id: '1', name: '无畏号', type: 'battleship', currentHealth: 1000, maxHealth: 1000, combatPower: 5000, defense: 3000 },
      { id: '2', name: '雷霆号', type: 'battleship', currentHealth: 950, maxHealth: 1000, combatPower: 5000, defense: 3000 }
    ]
  },
  {
    id: '2',
    name: '探索舰队',
    type: 'exploration',
    status: 'moving',
    currentLocation: '半人马座α',
    combatPower: 3500,
    defense: 2800,
    speed: 180,
    detectionRange: 800,
    maintenanceCost: 320,
    crew: 800,
    composition: [
      { type: 'explorer', count: 3 },
      { type: 'scout', count: 6 }
    ],
    ships: [
      { id: '3', name: '发现号', type: 'explorer', currentHealth: 600, maxHealth: 600, combatPower: 1200, defense: 800 }
    ]
  }
])

const shipyards = ref<Shipyard[]>([
  {
    id: '1',
    name: '地球造船厂',
    location: '地球轨道',
    level: 3,
    totalSlots: 4,
    usedSlots: 2,
    currentProjects: [
      {
        id: '1',
        shipName: '新巡洋舰',
        shipType: 'cruiser',
        currentProgress: 1200,
        totalCost: 2000,
        timeRemaining: 45
      }
    ]
  },
  {
    id: '2',
    name: '火星造船厂',
    location: '火星轨道',
    level: 2,
    totalSlots: 2,
    usedSlots: 1,
    currentProjects: [
      {
        id: '2',
        shipName: '运输舰',
        shipType: 'transport',
        currentProgress: 800,
        totalCost: 1500,
        timeRemaining: 30
      }
    ]
  }
])

// 计算属性
const totalFleetPower = computed(() => fleets.value.reduce((sum, fleet) => sum + fleet.combatPower, 0))
const totalShips = computed(() => fleets.value.reduce((sum, fleet) => sum + fleet.ships.length, 0))
const activeFleets = computed(() => fleets.value.filter(fleet => fleet.status !== 'maintenance').length)
const shipyardsCount = computed(() => shipyards.value.length)
const maintenanceCost = computed(() => fleets.value.reduce((sum, fleet) => sum + fleet.maintenanceCost, 0))

const filteredFleets = computed(() => {
  return fleets.value.filter(fleet => {
    const typeMatch = selectedFleetType.value === 'all' || fleet.type === selectedFleetType.value
    const statusMatch = selectedStatus.value === 'all' || fleet.status === selectedStatus.value
    return typeMatch && statusMatch
  })
})

// 方法
function formatNumber(num: number): string {
  if (num >= 1000000) {
    return (num / 1000000).toFixed(1) + 'M'
  } else if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'K'
  }
  return num.toString()
}

function formatTime(minutes: number): string {
  const hours = Math.floor(minutes / 60)
  const mins = minutes % 60
  if (hours > 0) {
    return `${hours}小时${mins}分钟`
  }
  return `${mins}分钟`
}

function getFleetTypeName(type: string): string {
  const names = {
    combat: '战斗舰队',
    exploration: '探索舰队',
    transport: '运输舰队'
  }
  return names[type as keyof typeof names] || type
}

function getStatusName(status: string): string {
  const names = {
    idle: '待命',
    moving: '移动中',
    combat: '战斗中',
    maintenance: '维护中'
  }
  return names[status as keyof typeof names] || status
}

function getStatusIcon(status: string): string {
  const icons = {
    idle: '⏸️',
    moving: '🚀',
    combat: '⚔️',
    maintenance: '🔧'
  }
  return icons[status as keyof typeof icons] || '❓'
}

function getShipIcon(type: string): string {
  const icons = {
    battleship: '🚢',
    cruiser: '🛥️',
    destroyer: '⛵',
    explorer: '🔍',
    scout: '👁️',
    transport: '📦'
  }
  return icons[type as keyof typeof icons] || '🚢'
}

function getShipTypeName(type: string): string {
  const names = {
    battleship: '战列舰',
    cruiser: '巡洋舰',
    destroyer: '驱逐舰',
    explorer: '探索舰',
    scout: '侦察舰',
    transport: '运输舰'
  }
  return names[type as keyof typeof names] || type
}

function selectFleet(fleet: Fleet) {
  selectedFleet.value = fleet
}

function closeFleetDetails() {
  selectedFleet.value = null
}

function toggleFleetView() {
  fleetViewMode.value = fleetViewMode.value === 'grid' ? 'list' : 'grid'
}

function createNewFleet() {
  console.log('创建新舰队')
}

function manageFleet(fleet: Fleet) {
  console.log('管理舰队:', fleet.name)
}

function moveFleet(fleet: Fleet) {
  console.log('移动舰队:', fleet.name)
}

function viewFleetDetails(fleet: Fleet) {
  selectFleet(fleet)
}

function buildNewShip() {
  console.log('建造新舰船')
}

function upgradeShipyard(shipyard: Shipyard) {
  console.log('升级造船厂:', shipyard.name)
}

function manageShipyard(shipyard: Shipyard) {
  console.log('管理造船厂:', shipyard.name)
}

function repairShip(ship: Ship) {
  console.log('修理舰船:', ship.name)
}

function upgradeShip(ship: Ship) {
  console.log('升级舰船:', ship.name)
}

function attackOrder() {
  console.log('攻击指令')
}

function defendOrder() {
  console.log('防御指令')
}

function patrolOrder() {
  console.log('巡逻指令')
}

function retreatOrder() {
  console.log('撤退指令')
}
</script>

<style scoped>
.military-view {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--bg-primary);
  color: var(--text-primary);
}

.military-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.view-title {
  display: flex;
  flex-direction: column;
}

.title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.title-icon {
  font-size: 1.5rem;
}

.subtitle {
  margin: 0.25rem 0 0 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.military-controls {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.fleet-power {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.power-icon {
  font-size: 1.2rem;
}

.power-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary-color);
}

.power-label {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.view-filters {
  display: flex;
  gap: 0.75rem;
}

.filter-select {
  padding: 0.5rem 1rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
}

.create-fleet-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.create-fleet-btn:hover {
  background: var(--primary-hover);
}

.military-content {
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.military-overview {
  margin-bottom: 1rem;
}

.overview-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.stat-icon {
  font-size: 2rem;
  opacity: 0.8;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 0.25rem;
}

.stat-label {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.fleets-section,
.shipyards-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.5rem;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.section-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
}

.section-actions {
  display: flex;
  gap: 0.75rem;
}

.view-toggle-btn,
.build-ship-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.view-toggle-btn:hover,
.build-ship-btn:hover {
  background: var(--bg-hover);
}

.build-ship-btn {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.build-ship-btn:hover {
  background: var(--primary-hover);
}

.fleets-container {
  display: grid;
  gap: 1.5rem;
}

.fleets-container.grid {
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

.fleets-container.list {
  grid-template-columns: 1fr;
}

.fleet-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fleet-card:hover {
  border-color: var(--primary-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.fleet-card.selected {
  border-color: var(--primary-color);
  background: var(--bg-hover);
}

.fleet-card.status-idle {
  border-left: 4px solid var(--info-color);
}

.fleet-card.status-moving {
  border-left: 4px solid var(--warning-color);
}

.fleet-card.status-combat {
  border-left: 4px solid var(--error-color);
}

.fleet-card.status-maintenance {
  border-left: 4px solid var(--text-secondary);
}

.fleet-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.fleet-info {
  flex: 1;
}

.fleet-name {
  margin: 0 0 0.5rem 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
}

.fleet-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.fleet-type,
.fleet-location {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.fleet-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.status-indicator {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.status-indicator.status-idle {
  background: rgba(59, 130, 246, 0.2);
}

.status-indicator.status-moving {
  background: rgba(245, 158, 11, 0.2);
}

.status-indicator.status-combat {
  background: rgba(239, 68, 68, 0.2);
}

.status-indicator.status-maintenance {
  background: rgba(107, 114, 128, 0.2);
}

.status-text {
  font-size: 0.7rem;
  color: var(--text-secondary);
}

.fleet-composition {
  margin-bottom: 1rem;
}

.ship-types {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.ship-type-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-secondary);
  border-radius: 6px;
  font-size: 0.9rem;
}

.ship-icon {
  font-size: 1.2rem;
}

.ship-count {
  font-weight: 600;
  color: var(--text-primary);
}

.fleet-stats {
  margin-bottom: 1rem;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.stat-icon {
  font-size: 1rem;
}

.stat-text {
  color: var(--text-primary);
  font-weight: 500;
}

.fleet-actions {
  display: flex;
  gap: 0.75rem;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.action-btn:hover {
  background: var(--bg-hover);
}

.action-btn.primary {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.action-btn.primary:hover {
  background: var(--primary-hover);
}

.action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-icon {
  font-size: 1rem;
}

.shipyards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1.5rem;
}

.shipyard-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.5rem;
}

.shipyard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.shipyard-info {
  flex: 1;
}

.shipyard-name {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.shipyard-location {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.shipyard-level {
  padding: 0.25rem 0.75rem;
  background: var(--primary-color);
  color: white;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.shipyard-capacity {
  margin-bottom: 1.5rem;
}

.capacity-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.capacity-label {
  color: var(--text-secondary);
}

.capacity-value {
  color: var(--text-primary);
  font-weight: 600;
}

.capacity-bar {
  height: 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
  overflow: hidden;
}

.capacity-fill {
  height: 100%;
  background: var(--primary-color);
  transition: width 0.3s ease;
}

.current-projects {
  margin-bottom: 1.5rem;
}

.projects-title {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.projects-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.project-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  background: var(--bg-secondary);
  border-radius: 6px;
}

.project-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}

.project-icon {
  font-size: 1.5rem;
}

.project-details {
  flex: 1;
}

.project-name {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.project-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.progress-bar {
  flex: 1;
  height: 6px;
  background: var(--bg-primary);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--primary-color);
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 0.8rem;
  color: var(--text-secondary);
  min-width: 35px;
}

.project-time {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.shipyard-actions {
  display: flex;
  gap: 0.75rem;
}

.fleet-details-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  height: 100vh;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-color);
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.panel-title-section {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
}

.panel-icon {
  font-size: 2rem;
}

.panel-title-info {
  flex: 1;
}

.panel-title {
  margin: 0 0 0.25rem 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
}

.panel-subtitle {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.close-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: var(--bg-hover);
  color: var(--error-color);
}

.panel-content {
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.fleet-overview {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.overview-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  background: var(--bg-primary);
  border-radius: 6px;
}

.overview-label {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.overview-value {
  color: var(--text-primary);
  font-weight: 500;
}

.fleet-capabilities {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.capabilities-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}

.capabilities-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.capability-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--bg-primary);
  border-radius: 6px;
}

.capability-icon {
  font-size: 1.5rem;
}

.capability-info {
  flex: 1;
}

.capability-name {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

.capability-value {
  font-weight: 600;
  color: var(--text-primary);
}

.fleet-ships {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ships-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}

.ships-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ship-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--bg-primary);
  border-radius: 6px;
}

.ship-info {
  flex: 1;
}

.ship-name {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.ship-type {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.ship-stats {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ship-health {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.health-bar {
  width: 60px;
  height: 6px;
  background: var(--bg-secondary);
  border-radius: 3px;
  overflow: hidden;
}

.health-fill {
  height: 100%;
  background: var(--success-color);
  transition: width 0.3s ease;
}

.health-text {
  font-size: 0.7rem;
  color: var(--text-secondary);
}

.ship-actions {
  display: flex;
  gap: 0.5rem;
}

.ship-btn {
  width: 32px;
  height: 32px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ship-btn:hover {
  background: var(--bg-hover);
}

.ship-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.fleet-orders {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.orders-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}

.orders-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.order-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  font-weight: 500;
}

.order-btn.attack {
  background: var(--error-color);
  color: white;
  border-color: var(--error-color);
}

.order-btn.defend {
  background: var(--info-color);
  color: white;
  border-color: var(--info-color);
}

.order-btn.patrol {
  background: var(--warning-color);
  color: white;
  border-color: var(--warning-color);
}

.order-btn.retreat {
  background: var(--text-secondary);
  color: white;
  border-color: var(--text-secondary);
}

.order-btn:hover {
  opacity: 0.8;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .military-header {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
  
  .military-controls {
    flex-direction: column;
    gap: 1rem;
  }
  
  .fleets-container.grid {
    grid-template-columns: 1fr;
  }
  
  .shipyards-grid {
    grid-template-columns: 1fr;
  }
  
  .fleet-details-panel {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
  }
}
</style>